<template>
    <el-drawer :title="$t('game.other.mail.drawer.details')" size="400px" :visible.sync="drawerVisible" @close="$emit('update:visible', false)">
        <vue-simplebar>
            <div class="pt-12 pb-12 pr-3" v-if="data.id">
                <el-form label-width="120px" class="detail">
                    <el-form-item label="ID">{{ data.id }}</el-form-item>
                    <el-form-item :label="$t('platform.setting.tree.org')">
                        {{ data.org.name || data.plat_code }}
                    </el-form-item>
                    <el-form-item :label="$t('game.other.mail.type')">
                        <el-tag effect="plain" size="mini" type="info">
                            {{ $t(`game.other.mail.typeList.${data.type}.label`) || data.type }}
                        </el-tag>
                    </el-form-item>
                    <el-form-item :label="$t('game.other.mail.title')">
                        <div v-for="(title,index) in data.titles" :key="index" v-html="title.content"></div>
                    </el-form-item>
                    <el-form-item :label="$t('game.other.mail.body')">
                        <div v-for="(body,index) in data.bodys" :key="index" v-html="body.content_format"></div>
                    </el-form-item>
                    <el-form-item :label="$t('game.other.mail.annex')">
                        <el-tag v-for="(annex,index) in data.annex" :key="index"
                                effect="plain" size="mini" type="info" class="mr-1">
                            {{ annex[1] }} {{ $t(`game.setting.item.items.${annex[0]}.label`) }}
                        </el-tag>
                    </el-form-item>
                    <el-form-item :label="$t('game.other.mail.send_time')">
                        <div v-if="!data.send_time">----</div>
                        <component-page-timestamp :timestamp="data.send_time" v-else></component-page-timestamp>
                    </el-form-item>
                    <el-form-item :label="$t('game.other.mail.expire_time')">
                        <component-page-timestamp :timestamp="data.expire_time"></component-page-timestamp>
                    </el-form-item>
                    <el-form-item :label="$t('game.other.mail.created')">
                        <component-page-timestamp :timestamp="data.created"></component-page-timestamp>
                    </el-form-item>
                    <el-form-item :label="$t('game.other.mail.updated')">
                        <component-page-timestamp :timestamp="data.updated"></component-page-timestamp>
                    </el-form-item>
                    <el-form-item :label="$t('game.other.mail.issend')">
                        <el-tag effect="plain" size="mini" type="info">
                            {{ $t('game.other.mail.issendList')[data.issend].label }}
                        </el-tag>
                    </el-form-item>
                </el-form>
            </div>
        </vue-simplebar>
    </el-drawer>
</template>

<script>
export default {
    name: "ItemDetails",
    props: ['visible', 'data'],
    data() {
        return {
            drawerVisible: false,
        }
    },
    watch: {
        visible: function (n, o) {
            if (n) {
                // 显示抽屉
                this.drawerVisible = n;
            }
        }
    },
}
</script>

<style scoped>

</style>
